<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap项目实战</title>
    <!-- Bootstrap -->
    <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/animate.css">

    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <!-- 导航开始 -->
    <nav class="navbar navbar-default navbar-fixed-top">

        <div class="container">
            <!-- 小屏幕导航按钮start -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
                <a class="navbar-brand" href="index.html">Bootstrap项目实战</a>
            </div>
            <!-- 小屏幕导航按钮end -->

            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#home">首页</a></li>
                    <li><a href="#bbs">论坛</a></li>
                    <li><a href="#html5">前端开发</a></li>
                    <li><a href="#course">最新课程</a></li>
                    <li><a href="#app">移动APP</a></li>
                    <li><a href="#contact">联系我们</a></li>
                </ul>
            </div>
        </div>

    </nav>
    <!-- 导航结束 -->

    <!-- banner 开始 -->
    <section id="home">
        <div class="musk">

            <div class="container">

                <div class="row wow fadeInUp" data-wow-duration="1s" data-wow-offset="10">
                    <div class="col-md-1"></div>
                    <div class="col-md-10">
                        <div class="col-md-1"></div>
                        <h1>Bootstrap实战课程等你来战！</h1>
                        <p>这些项目或者是对Bootstrap进行了有益的补充，或者是基于Bootstrap开发的<br> Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。
                        </p>
                        <img src="./images/TQ_BG.png" class="img-responsive" alt="">
                    </div>
                    <div class="col-md-1"></div>
                </div>
            </div>

        </div>
    </section>
    <!-- banner 结束 -->

    <!-- BBS论坛区域开始 -->
    <section id="bbs">

        <div class="container">
            <div class="row wow fadeInDown" data-wow-duration="1s" data-wow-offset="10">

                <div class="col-md-4">
                    <a href="https://www.baidu.com" target="_blank">
                        <img src="images/bbs-1.png" class="img-responsive" alt="">
                        <h3>Nuxt.js 框架是如何运作的</h3>
                        <p>Nuxt.js 集成了以下组件/框架，用于开发完整而强大的 Web 应用。</p>
                    </a>
                </div>
                <div class="col-md-4">
                    <a href="https://www.baidu.com" target="_blank">
                        <img src="images/bbs-2.png" class="img-responsive" alt="">
                        <h3>它是针对 JavaScript 应用程序</h3>
                        <p>它可以帮助您编写性能一致、在不同环境（客户端、服务器和原生环境）中运行且易于测试的应用程序。</p>
                    </a>
                </div>
                <div class="col-md-4">
                    <a href="https://www.baidu.com" target="_blank">
                        <img src="images/bbs-3.png" class="img-responsive" alt="">
                        <h3>Rust 程序设计语言</h3>
                        <p>Rust 被证明是可用于大型的、拥有不同层次系统编程知识的开发者团队间协作的高效工具。</p>
                    </a>
                </div>

            </div>
        </div>

    </section>
    <!-- BBS论坛区域结束 -->

    <!-- html5区域开始 -->
    <section id="html5">

        <div class="container">
            <div class="row">

                <div class="col-md-6 wow fadeInLeft" data-wow-offset="10">
                    <h2>为什么要使用 Grunt？</h2>
                    <p>Grunt 生态系统非常庞大，并且一直在增长。由于拥有数量庞大的插件可供选择， 因此，你可以利用 Grunt 自动完成任何事，并且花费最少的代价。如果找不到你所需要的插件， 那就自己动手创造一个 Grunt 插件，然后将其发布到 npm 上吧。</p>
                    <p><span class="glyphicon glyphicon-grain maizi-icon"></span>在继续学习前，你需要先将Grunt命令行（CLI）安装到全局环境中。</p>
                    <p><span class="glyphicon glyphicon-grain maizi-icon"></span>在安装 Grunt 前，请确保当前环境中所安装的 npm 已经是最新版本。</p>
                </div>
                <div class="col-md-6 wow fadeInRight" data-wow-offset="10">
                    <img src="/images/html5-bg.png" alt="">
                </div>

            </div>
        </div>

    </section>
    <!-- html5区域结束 -->

    <!-- bootstrap区域开始 -->
    <section id="bootstrap">

        <div class="container">
            <div class="row wow fadeInDown" data-wow-offset="10">
                <div class="col-md-6">
                    <img src="/images/bootstrap-bg.png" alt="">
                </div>
                <div class="col-md-6">
                    <h2>一种用于 API 的查询语言</h2>
                    <p>GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。 GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述，使得客户端能够准确地获得它需要的数据，而且没有任何冗余。</p>
                    <p><span class="glyphicon glyphicon-grain maizi-icon"></span>请求你所要的数据不多不少。</p>
                    <p><span class="glyphicon glyphicon-grain maizi-icon"></span>获取多个资源只用一个请求。</p>
                </div>
            </div>
        </div>

    </section>
    <!-- bootstrap区域结束 -->

    <!-- course区域开始 -->
    <section id="course">

        <div class="container">

            <div class="row">
                <div class="col-md-12">
                    <h2>最新课程</h2>
                </div>
            </div>

            <div class="row">
                <div class="col-md-3">
                    <div class="course">
                        <img src="./images/course-1.png" alt="" class="img-responsive">
                        <a href="#" target="_blank" class="btn btn-primary" role="button">开始学习</a>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="course">
                        <img src="./images/course-2.png" alt="" class="img-responsive">
                        <a href="#" target="_blank" class="btn btn-primary" role="button">开始学习</a>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="course">
                        <img src="./images/course-3.png" alt="" class="img-responsive">
                        <a href="#" target="_blank" class="btn btn-primary" role="button">开始学习</a>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="course">
                        <img src="./images/course-4.png" alt="" class="img-responsive">
                        <a href="#" target="_blank" class="btn btn-primary" role="button">开始学习</a>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-3">
                    <div class="course">
                        <img src="./images/course-1.png" alt="" class="img-responsive">
                        <a href="#" target="_blank" class="btn btn-primary" role="button">开始学习</a>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="course">
                        <img src="./images/course-2.png" alt="" class="img-responsive">
                        <a href="#" target="_blank" class="btn btn-primary" role="button">开始学习</a>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="course">
                        <img src="./images/course-3.png" alt="" class="img-responsive">
                        <a href="#" target="_blank" class="btn btn-primary" role="button">开始学习</a>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="course">
                        <img src="./images/course-4.png" alt="" class="img-responsive">
                        <a href="#" target="_blank" class="btn btn-primary" role="button">开始学习</a>
                    </div>
                </div>
            </div>

        </div>

    </section>
    <!-- course区域结束 -->

    <!-- app区域开始 -->
    <section id="app">

        <div class="container">
            <div class="row wow fadeInDown" data-wow-offset="10">

                <div class="col-md-6">
                    <h2>Bootstrap相关优质模板下载</h2>
                    <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
                    <button class="btn btn-primary"><span class="glyphicon glyphicon-download-alt"></span>IOS端下载</button>
                    <button class="btn btn-primary"><span class="glyphicon glyphicon-download-alt"></span>安卓端下载</button>
                </div>
                <div class="col-md-6">
                    <img src="./images/app-download.png" alt="" class="img-responsive">
                </div>

            </div>
        </div>

    </section>
    <!-- app区域结束 -->

    <!-- contact区域开始 -->
    <section id="contact">
        <div class="musk">
            <div class="container">

                <div class="row">
                    <div class="col-md-6 col-lg-6 wow fadeInLeft" data-wow-offset="10">
                        <h2><span class="glyphicon glyphicon-send"></span>联系我们</h2>
                        <p class="contact-p">Bootstrap 最初是由 @mdo 和 @fat 于2010年中旬创造的。 在开源之前被称为 Twitter Blueprint。经过几个月的开发，Twitter 举办了首届 Hack Week 并将这个项目被公布出来，各个技能水平的开发者都可以在没有任何外部指导的情况下参与进来。在开源之前的近一年多的时间里，这个项目作为公司内部工具开发的样式指南，当然，现在它仍然扮演者同样的角色。</p>
                        <address>
                          <p><span class="glyphicon glyphicon-home"></span>地址：深圳市南山区学府路东百度国际大厦</p>
                          <p><span class="glyphicon glyphicon-phone"></span>电话：(+86 10)5992 8888</p>
                          <p><span class="glyphicon glyphicon-envelope"></span>邮箱：518000@qq.com</p>
                        </address>
                    </div>
                    <div class="col-md-6 col-lg-6 wow fadeInRight" data-wow-offset="10">

                        <form action="" method="POST" role="form">

                            <div class=" col-md-6 col-lg-6">
                                <input type="text" class="form-control" placeholder="您的姓名">
                            </div>
                            <div class=" col-md-6 col-lg-6">
                                <input type="email" class="form-control" placeholder="您的邮箱">
                            </div>
                            <div class=" col-md-12">
                                <input type="text" class="form-control" placeholder="标题">
                            </div>
                            <div class=" col-md-12">
                                <textarea class="form-control" rows="4" required="required" placeholder="请输入内容"></textarea>
                            </div>

                            <div class="col-md-8">
                                <input type="submit" class="form-control" value="提交">
                            </div>
                        </form>

                    </div>
                </div>

            </div>
        </div>
    </section>
    <!-- contact区域结束 -->

    <!-- footer区域开始 -->
    <section id="footer">

        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <p>京ICP备11008151号-6 京公网安备11010802014853</p>
                </div>
            </div>
        </div>

    </section>
    <!-- footer区域结束 -->

    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="./bootstrap/js/bootstrap.min.js"></script>
    <script src="./js/singlepagenav.jquery.js"></script>
    <script src="./js/wow.min.js"></script>
    <script>
        $(function() {
            //大屏导航跳转
            $('.nav').singlePageNav({
                offset: 70
            });
            //小屏导航点击隐藏
            $('.navbar-collapse a').click(function() {
                $('.navbar-collapse').collapse('hide')
            });
            new WOW().init();
        })
    </script>

</body>

</html>